<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第九师水利工程一张图</title>
    <!--    引入各类样式-->
    <link href="openlayers/ol.css" rel="stylesheet">
    <link href="superMap_for_openlayers/iclient-ol.css" rel="stylesheet">
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="fontawesome/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link href="css/video-js.css" rel="stylesheet">
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <link href="css/index.css" rel="stylesheet">
    <style>
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }
        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }
        .tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
            border-radius: 9px;
            font-size: 13px;
        }
        .tooltip-measure:before,
        .tooltip-static:before {
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;

        }
        .tooltip-static:before {
            border-top-color: #ffcc33;
        }
        .ol-popup {
            position: absolute;
            background-color: #000a3f80;
            color:white;
            border: 1px solid #28e5e9;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            bottom: 12px;
            left: -50px;
            min-width: 200px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: #28e5e9;

            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {

            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color: white;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
        #popup-content p{
            margin-bottom: 5px;
        }
        ::-webkit-scrollbar{
            width:0;
        }
        .ol-popup_map {
            position: absolute;
            background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#28e5e9cc), to(#0efcff4d));
            color:white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 10px 15px 15px 15px;
            border-radius: 10px;
            bottom: 37px;
            left: -202px;
            min-width: 400px;
            min-height: 450px;
        }
        .ol-popup_map:after, .ol-popup_map:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup_map:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: 150px;
        }
        .ol-popup_map:before {

            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer_map {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color: white;
        }
        .ol-popup-closer_map:after {
            content: "✖";
        }
        .env_information tr{
            height: 39.8px;
        }
        .env_information img{
            margin-top: 5px;
        }
        .plant>li {
            width: 32%;
            height: 100%;
        }
        .element_talbe_dev .layui-table {
            width: 100%;
            color: white;
            background-color: #ffffff00;
        }
        .element_talbe_dev .layui-table-cell {
            padding: 0;
            text-align: center;
        }
        .element_talbe_dev .layui-table-header{
            background-color: #FAFAFA00;
        }
        .element_talbe_dev .layui-table-header{
            border-color: #28e5e9;
        }
        .layui-table-page{
            border-color: #28e5e9;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #28e5e9;
        }

        .layui-laypage a, .layui-laypage span {
            color: #28e5e9;
        }
        .layui-disabled, .layui-disabled:hover {
            color: #28e5e9!important;
            cursor: not-allowed!important;
        }

        .element_talbe_dev .layui-table td, .element_talbe_dev .layui-table th,.element_talbe_dev .layui-table-view{
            border-width: 1px;
            border-style: solid;
            border-color: #28e5e9;
        }
        .element_talbe_dev .layui-table th{
            border-width: 1px;
            border-style: solid;
            border-color: #28e5e9;
            font-size: 16px;
        }
        .element_talbe_dev .layui-table thead tr{
            background-color: #0efcff4d;
            color: #0EFCFF;;
            height: 45.55px;
        }
        .layui-table-view {
            margin: 0;
        }
        .element_talbe_dev .layui-table tbody tr:hover{
            background-color: #0efcff4d;
        }
        input::-webkit-input-placeholder {
            color: white;
        }

        .layui-form-select .layui-input {
            background-color: #28e5e980;
            color: white;
            border: 0;
        }
        .layui-form-select .layui-edge {
            border-top-color: white;
        }
        .layui-form-selected dl {
            color: white;
            background-color: #000a3ff5;
        }
        .layui-form-item {
            margin-bottom: 13px;
        }
        #element_describe thead tr{
            background-color: #f2f4fe;
        }
        #element_describe .layui-table td{
            border-color: #dfdfdf;
        }
        #element_describe .layui-table[lay-even] tr:nth-child(even) {
            background-color: #f2f4fe;
        }
        #element_describe table {
            width: 95%;
            margin-left: 2.5%;
        }




    </style>

    <style lang="less" >
        /*    vue element样式*/
        .el-input__inner {
            background-color: rgba(40, 229, 233, .5);
            border: 0px solid #DCDFE6;
            color: #fff;
        }

        .el-select__caret {
            color: #ffffff !important;
        }
        .el-select-dropdown {
            border: 0px solid #E4E7ED;
            background-color: #fff0;
        }
        .el-select-dropdown__item {
            color: #fff;
        }
        .el-select-dropdown__list {
            background: #000a3fc4;
        }
        .el-select-dropdown__item.hover{
            background-color: rgba(40, 229, 233, .5);
        }
        .el-select-dropdown__item.selected {
            color: #fff;
        }
        .el-popper[x-placement^=bottom] .popper__arrow::after {
            border-bottom-color: #000a3fc4;
        }
        .el-popper[x-placement^=bottom] .popper__arrow {
            border-bottom-color: #000a3fc4;
        }
        .el-scrollbar__thumb {
            background-color: #90939987;
        }
        .el-switch .layui-form-checkbox {
            display: none;
        }
        #app_1 .el-switch{
            position: absolute;
            left: 310%;
            width: 150px;
        }



    </style>
</head>

<!-- 黄瑶 -->


<body>
<div class="main">
    <div class="nav">第九师水利一张图</div>
    <div class="nav_btn">
        <div class="btn_left" >
            <a href="index.html" style="margin-right: 78px;">
                <div class="btn_list listActive" ><p style="margin-left: 20px;">水利一张图</p></div>
            </a>
            <a href="real_time_monitor.html" style="margin-right: 30px;">
                <div class="btn_list" ><p style="margin-left: 28px;">实时监测</p></div>
            </a>
        </div>
        <div class="btn_right" >
            <a href="fillout_data.html" style="margin-right: 85px;">
                <div class="btn_list" ><p style="margin-left: 28px;">数据填报</p></div>
            </a>
            <a href="system_set.html" style="margin-right: 30px;">
                <div class="btn_list" ><p style="margin-left: 26px;">系统管理</p></div>
            </a>

        </div>
    </div>
    <div class="content layui-anim layui-anim-scale"  style="margin-left: 1%;" >

        <div id="map" style="position: absolute;width: 101%; height: 102.5%; margin: auto;">

        </div>
        <div id="map_bd" style="position: absolute;width: 1881px;height: 863.2px;overflow: hidden; margin: auto;">

        </div>
        <div class="baseBoxLeft left " style="position: absolute;background-color: #000a3f82;width: 20%;height: 66%;border-radius: 10px;margin-left: 10px; margin-top: 10px;">
            <div class="boxTitle" style="margin-left: 10px;">各团工程统计</div>
            <img src="img/left.png" alt="">
            <div class="boxTitle" style="margin-left: 10px;margin-top: 5px;width: 90%;">
                <form class="layui-form" action="" style="padding-left: 16px;">
                    <div class="layui-form-item">
                        <div style="display: inline-block;width: 52%;margin-right: 20px;float: left;margin-left: 8px;height: 36px;" id="app_1">
                            <template>
                                <el-select v-model="value" placeholder="水库">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                            <el-switch
                                    v-model="value_switch"
                                    active-text="渠道路线"
                                    active-color="#13ce66"
                                    @change="changeSwitch(value_switch)">
                            </el-switch>

                        </div>
                        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="padding: 0 14px;height: 36px;line-height: 0;background-color: #28e5e980;"><i class="layui-icon">&#xe601;</i>   导出</button>
                    </div>
                </form>
            </div>
            <table class="equipment_table env_table" style="height: 73%;margin-top: 0%;">
                <tr style="height: 40px;">
                    <td>序号</td>
                    <td>团场</td>
                    <td>工程数量</td>
                    <td>定位</td>
                    <td>导出</td>
                </tr>
                <tr style="height: 38px;">
                    <td>1</td>
                    <td>161团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(0)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>2</td>
                    <td>162团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(1)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>3</td>
                    <td>163团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(2)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>4</td>
                    <td>164团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(3)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>5</td>
                    <td>165团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(4)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>6</td>
                    <td>166团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(5)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>7</td>
                    <td>167团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(6)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>8</td>
                    <td>168团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px;" onclick="find_location(7)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>9</td>
                    <td>169团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(8)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
                <tr style="height: 38px;">
                    <td>10</td>
                    <td>170团</td>
                    <td>2座</td>
                    <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(9)"  alt="定位"/></td>
                    <td><i class="fa fa-download " style="color: #28e5e9;font-size: 18px;margin-top: 5px;"></i></td>
                </tr>
            </table>
        </div>
        <div class="baseBoxLeft left"  style="position: absolute;background-color: #000a3f82;width: 20%;height: 32%;border-radius: 10px;margin-left: 10px; margin-top: 31.5%;">
            <img src="img/right3.png" alt="" style="height: 98%;width: 97%;margin-left: 5px;">
            <!-- 四个角描边 end -->
            <div class="boxTitle2">水情填报记录</div>
            <div class="boxRader" id="mains"></div>
        </div>
        <div class="baseBoxRight right" style="position: absolute;width: 25%; height: 16%; margin-left: 38%;">
            <ul class="plant">
                <li>
                    <a class="jumps" href="" style="background-color: #000a3f4d;">
                        <div>
                            <span>水库预警(个)</span>
                            <img src="img/qqzmj.png" alt="">
                        </div>
                        <p class="">0</p>
                        <span class="spans3" style="background: #ff0000;"></span>
                    </a>
                </li>
                <li>
                    <a class="jumps" href="" style="background-color: #000a3f4d;">
                        <div>
                            <span>河道预警(条)</span>
                            <img src="img/ccc2.png" alt="">
                        </div>
                        <p class="">0</p>
                        <span class="spans2" style="background: #ff7f00;"></span>
                    </a>
                </li>
                <li>
                    <a class="jumps" href="" style="background-color: #000a3f4d;">
                        <div>
                            <span>雨情预警(处)</span>
                            <img src="img/ccc.png" alt="">
                        </div>
                        <p class="">0</p>
                        <span class="spans3" style="background: #ffff00;"></span>
                    </a>
                </li>
                <!--                    <li>-->
                <!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
                <!--                            <div>-->
                <!--                                <span>河流(条)</span>-->
                <!--                                <img src="img/ccc.png" alt="">-->
                <!--                            </div>-->
                <!--                            <p class="">2000</p>-->
                <!--                            <span class="spans3" style="background: #00ff00;"></span>-->
                <!--                        </a>-->
                <!--                    </li>-->
                <!--                    <li>-->
                <!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
                <!--                            <div>-->
                <!--                                <span>渠道(条)</span>-->
                <!--                                <img src="img/ccc.png" alt="">-->
                <!--                            </div>-->
                <!--                            <p class="">2000</p>-->
                <!--                            <span class="spans3" style="background: #00ffff;"></span>-->
                <!--                        </a>-->
                <!--                    </li>-->
                <!--                    <li>-->
                <!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
                <!--                            <div class="clear plantTop ">-->
                <!--                                <span class="flexLeft">机电井(眼)</span>-->
                <!--                                <img class="flexright" src="img/cy.png" alt="">-->
                <!--                            </div>-->
                <!--                            <p class=" plantNum1">3207</p>-->
                <!--                            <span class="spans0" style="background: #0000ff;"></span>-->
                <!--                        </a>-->
                <!--                    </li>-->
                <!--                    <li>-->
                <!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
                <!--                            <div class="clear plantTop ">-->
                <!--                                <span class="flexLeft">灌区测点(个)</span>-->
                <!--                                <img class="flexright" src="img/cq.png" alt="">-->
                <!--                            </div>-->
                <!--                            <p class=" plantNum1">157</p>-->
                <!--                            <span class="spans1" style="background: #8b00ff;"></span>-->
                <!--                        </a>-->
                <!--                    </li>-->
                <!--                    <li>-->
                <!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
                <!--                            <div>-->
                <!--                                <span>人饮工程(个)</span>-->
                <!--                                <img src="img/cn.png" alt="">-->
                <!--                            </div>-->
                <!--                            <p class="">36</p>-->
                <!--                            <span class="spans2" style="background: Violet;"></span>-->
                <!--                        </a>-->
                <!--                    </li>-->

            </ul>
        </div>
        <div class="baseBoxLeft left" id="right_1" style="position: absolute;background-color: #000a3f82;width: 20%;height: 32%;border-radius: 10px;margin-left: 80.5%; margin-top: 10px;">
            <img src="img/right.png" alt="">
            <div class="csbaseBox1">
                <div class="boxTitle">一张图工具箱</div>
                <div class="layui-btn-group" style="margin-left: 14%;margin-top: 5%;border-bottom: 1px solid #28e5e9;height: 45px;">
                    <button id="type_c0" onclick="layerChange(0)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;border:3px solid #28e5e9" ><i class="fa fa-globe " style="margin-right: 5px;"></i>影像</button>
                    <button id="type_c1" onclick="layerChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);"><i class="fa fa-map-signs" style="margin-right: 5px;"></i>地形</button>
                    <button id="type_c2" onclick="layerChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;"><i class="layui-icon" style="margin-right: 5px;"> &#xe656;</i>工程图层</button>
                </div>
<!--                <button id="other_tool" onclick="toolChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 3%;"><i class="fa fa-briefcase" style="margin-right: 5px;"></i>地图测量工具</button>-->
<!--                <button id="element_search" onclick="toolChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 2%;"><i class="fa fa-bar-chart " style="margin-right: 5px;padding: 0px;"></i>基础要素查询</button>-->
<!--                <button id="water_monitor" onclick="toolChange(0)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 2%;" ><i class="layui-icon" style="margin-right: 5px;padding: 0px;">&#xe615;</i>监测数据查询</button>-->


<!--                <div id="measure_box" class="layui-btn-group" style="margin-left: 19%;margin-top: 5%;height: 45px;display: none;">-->
<!--                    <button id="length_measure" onclick="measureChange(0)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;border:3px solid #28e5e9" ><i class="fa fa-pencil" style="margin-right: 5px;"></i>测距</button>-->
<!--                    <button id="polygon_measure" onclick="measureChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);"><i class="fa fa-map" style="margin-right: 5px;"></i>测面</button>-->
<!--                    <button id="clear_measure" onclick="measureChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;"><i class="fa fa-trash" style="margin-right: 5px;"> </i>清除</button>-->
<!--                </div>-->
<!--                <button id="close_measure" onclick="close_measure()" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 2%;display: none;" ><i class="fa fa-times-circle" style="margin-right: 5px;"></i>关闭测量工具箱</button>-->

            </div>
        </div>
        <!--            <div class="baseBoxLeft left" id="right_2" style="position: absolute;background-color: #000a3f82;width: 20%;height: 32%;border-radius: 10px;margin-left: 80.5%; margin-top: 16%;">-->
        <!--                <img src="img/right2.png" alt="" style="height: 98%;width: 97%;margin-left: 5px;">-->
        <!--                &lt;!&ndash; 四个角描边 end &ndash;&gt;-->
        <!--                <div class="boxTitle2">水利工程巡检记录</div>-->
        <!--                <div class="boxRader" id="wind"></div>-->
        <!--            </div>-->
        <div class="baseBoxLeft left " id="right_3" style="position: absolute;background-color: #000a3f82;width: 20%;height: 67.5%;border-radius: 10px;margin-left: 80.5%; margin-top: 15.5%;">
            <img src="img/right2_modify.png"  alt="" style="height: 99%;width: 97%;margin-left: 5px;">
            <!-- 四个角描边 end -->
            <div class="boxTitle2" style="height: 5%;">水库库容统计</div>
            <div class="boxRader" id="Progress" style="height: 89%;"></div>
        </div>
        <div class="baseBoxLeft left" id="right_4" style="display:none;position: absolute;background-color: #000a3f82;width: 20%;height: 100.5%;border-radius: 10px;margin-left: 80.5%; margin-top: 10px;">
            <img src="img/right_big.png" alt="">
            <div class="csbaseBox1" style="height: 80%;">
                <div style="position: absolute;margin-left: 89%;top: -20px;">
                    <button id="element_gbs" onclick="elementChange(16)" type="button" class="layui-btn" style="background: #28e5e900;border-radius: 10px;"><i class="fa fa-times-circle" style="margin-right: 5px;font-size: 18px;color: #28e5e9;"></i></button>
                </div>
                <div class="boxTitle" style="margin-left: 0px;">基础要素查询</div>

                <div style="height: 135px;margin-top: 5%;overflow: scroll;overflow-x: hidden">
                    <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                        <button id="element_sk" onclick="elementChange(0)"  type="button" class="layui-btn" style="background: rgba(40, 229, 233, .8);border-radius: 10px 0 0 10px;" ><i class="fa fa-adjust" style="margin-right: 5px;font-size: 16px;"></i>水库</button>
                        <button id="element_rygc" onclick="elementChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);width: 113px;"><i class="fa fa-street-view" style="margin-right: 5px;font-size: 16px;"></i>人饮工程</button>
                        <button id="element_hl" onclick="elementChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;width: 83px;"><i class="fa fa-dot-circle-o" style="margin-right: 5px;"></i>河流</button>
                    </div>
                    <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                        <button id="element_dq" onclick="elementChange(8)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;" ><i class="fa fa-leaf" style="margin-right: 5px;"></i>斗渠</button>
                        <button id="element_ggqd" onclick="elementChange(3)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);"><i class="fa fa-anchor" style="margin-right: 5px;"></i>骨干渠道</button>
                        <button id="element_sz" onclick="elementChange(5)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;"><i class="fa fa-beer" style="margin-right: 5px;"></i>水闸</button>
                    </div>
                    <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                        <button id="element_sb" onclick="elementChange(10)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;padding-left: 19px;padding-right: 19px;" ><i class="fa fa-podcast" style="margin-right: 5px;"></i>首部</button>
                        <button id="element_swcz" onclick="elementChange(4)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding-left: 19px;padding-right: 19px;"><i class="fa fa-crosshairs" style="margin-right: 5px;"></i>水文测站</button>
                        <button id="element_bz" onclick="elementChange(11)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;padding-left: 17px;padding-right: 17px;"><i class="layui-icon" style="margin-right: 0;">&#xe628;</i>泵站</button>
                    </div>
                    <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                        <button id="element_df" onclick="elementChange(12)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;padding-left: 20px;padding-right: 20px;" ><i class="fa fa-ellipsis-h" style="margin-right: 5px;"></i>堤防</button>
                        <button id="element_xhtd" onclick="elementChange(13)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding-left: 20px;padding-right: 20px;"><i class="fa fa-code-fork" style="margin-right: 6px;"></i>泄洪通道</button>
                        <button id="element_jdj" onclick="elementChange(6)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;padding-left: 18px;padding-right: 18px;"><i class="fa fa-beer" style="margin-right: 5px;"></i>机井</button>
                    </div>
                    <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                        <button id="element_sdz" onclick="elementChange(14)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;padding: 0 15px 0 15px;" ><i class="fa fa-bolt" style="margin-right: 5px;"></i>水电站</button>
                        <button id="element_gqcsd" onclick="elementChange(7)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding-left: 18px;padding-right: 17px;"><i class="fa fa-anchor" style="margin-right: 5px;"></i>灌区测点</button>
                        <button id="element_qsk" onclick="elementChange(15)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;padding: 0 11px 0 11px;"><i class="fa fa-circle-o-notch " style="margin-right: 5px;"></i>取水口</button>
                    </div>
                    <div class="layui-btn-group" style="margin-left: 10%;border-bottom: 1px solid #28e5e9;height: 45px;">
                        <button id="element_gb" onclick="elementChange(16)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px;width: 280px;"><i class="fa fa-times-circle" style="margin-right: 5px;"></i>关闭</button>
                    </div>

                </div>

                <div style="height: 8%;margin-top:5%;width: 88%;margin-left: 7%;">
                    <form class="layui-form" action="" style="width: 200px;margin-right: 20px;display: inline-block;">
                        <div class="layui-form-item" style="margin-bottom: 0px;">
                            <input class="layui-input"  id="element_find" autocomplete="off" placeholder="请输入水利工程名称" style="color:white;border-radius: 10px;border: 1px solid #28e5e9;background: #28e5e900;">
                        </div>
                    </form>
                    <button id="element_find_button" type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #28e5e9cc;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe615;</i>搜索</button>
                </div>
                <div style="overflow: scroll;height: 79%;width: 88%;margin-left: 7%;padding-bottom: 1px;" class="element_talbe_dev">
                    <table class="equipment_table_e env_table_e" id="element_talbe" lay-filter="element_talbe">

                    </table>
                </div>

            </div>
        </div>
        <div class="baseBoxLeft left" id="right_5" style="display:none;position: absolute;background-color: #000a3f82;width: 20%;height: 100.5%;border-radius: 10px;margin-left: 80.5%; margin-top: 10px;">
            <img src="img/right_big.png" alt="">
            <div class="csbaseBox1" style="height: 80%;">
                <div class="boxTitle" style="margin-left: 0px;">监测数据查询</div>
                <div class="layui-btn-group" style="margin-left: 11%;border-bottom: 1px solid #28e5e9;height: 45px;margin-top: 5%;">
                    <button id="information_hd" onclick="informationChange(0)"  type="button" class="layui-btn" style="background: rgba(40, 229, 233, .8);border-radius: 10px 0 0 10px;padding: 0 13px;" ><i class="fa fa-dot-circle-o" style="margin-right: 5px;"></i>河道</button>
                    <button id="information_sk" onclick="informationChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding: 0 13px;"><i class="fa fa-adjust" style="margin-right: 5px;font-size: 16px;"></i>水库</button>
                    <button id="information_yq" onclick="informationChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding: 0 13px;"><i class="fa fa-archive" style="margin-right: 5px;"></i>雨情</button>
                    <button id="information_gb" onclick="informationChange(3)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;padding: 0 13px;"><i class="fa fa-times-circle" style="margin-right: 5px;"></i>关闭</button>
                </div>
                <div style="height: 8%;margin-top:5%;width: 88%;margin-left: 7%;">
                    <form class="layui-form" action="" style="width: 200px;margin-right: 20px;display: inline-block;">
                        <div class="layui-form-item" style="margin-bottom: 0px;">
                            <input class="layui-input"  id="information_find" autocomplete="off" placeholder="请输入监测要素名称" style="color:white;border-radius: 10px;border: 1px solid #28e5e9;background: #28e5e900;">
                        </div>
                    </form>
                    <button id="information_find_button" type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #28e5e9cc;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe615;</i>搜索</button>
                </div>


                <div style="overflow: scroll;height: 93%;width: 88%;margin-left: 7%;padding-bottom: 1px;">
                    <table class="equipment_table env_table env_information" style="height: 100%;margin-top:0;width: 100%;">
                        <tr style="height: 45.55px;">
                            <td>序号</td>
                            <td>名称</td>
                            <td>日水量(万m³)</td>
                            <td>位置</td>
                        </tr>
                        <tr style="height: 39.8px;">
                            <td>1</td>
                            <td>1号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px" onclick="find_location(0)"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>2号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>3号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>4号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>5号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>6号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>7号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>8号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px;"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>9号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>10号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>11</td>
                            <td>11号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>12</td>
                            <td>12号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>13</td>
                            <td>13号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>14</td>
                            <td>14号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>15</td>
                            <td>15号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>
                        <tr>
                            <td>16</td>
                            <td>16号站</td>
                            <td>2000</td>
                            <td><img src="img/nice_location.png" style="cursor: pointer;position: relative;height: 20px"  alt="定位"/></td>
                        </tr>

                    </table>
                </div>

            </div>
        </div>

    </div>
</div>

<div id="popup" class="ol-popup" style="border-radius: 10px !important;display: none;">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content" style="font-size: 13px;"></div>
</div>

<!--    当div和overlay结合后，样式的修改比较繁琐，因此设置两层，外层用于包裹，内层用于装饰-->
<div id="element_popup" class="ol-popup_map" style="display: none;">
    <a href="#" id="element_popup-closer" class="ol-popup-closer_map"></a>
    <div id="element_popup-content" style="font-size: 13px;">
        <img src="img/nice_location_blue.png" style="cursor: pointer;position: absolute;height: 30px;bottom: -40px;left: 193px;"  alt="定位"/>
        <div style="display: inline-block;margin-top: 3px;">
            <p style="font-size: 21px;margin-bottom: 3px" id="element_name">哈哈24</p>
        </div>
        <div id="element_describe" style="display: inline-block;bottom: 0px;background: #ffffff;width: 100%;left: 0px;height: 420px;border-radius: 0 0 9px 9px;position: absolute;overflow: scroll;">
            <table class="layui-table" lay-even>
                <colgroup>
                    <col width="160">
                </colgroup>
                <tbody id="project_detail">

                </tbody>
            </table>
        </div>
    </div>
</div>




<!--引入各类函数-->
<!--    <script src="js/video.js"></script>-->
<!--    <script src="js/videojs-contrib-hls.min.js" type="text/javascript"></script>-->
<!-- 必须先引入vue，  后使用element-ui -->
<script src="vue-dev/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="element-ui/lib/index.js"></script>
<script src="openlayers/ol.js"></script>
<script type="text/javascript"  src="superMap_for_openlayers/iclient-ol.js"></script>
<script type="text/javascript"  src="superMap_for_openlayers/include-web.js"></script>
<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="example/echarts/echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
<script src="example/js/require.js"></script>
<script src="example/js/example2.js"></script>
<script src="js/dataScoll.js"></script>

<script src="js/NineDivision_base.js"></script>
<script src="js/index_layui.js"></script>
<script src="js/public.js"></script>
<script src="js/index.js"></script>
<script src="js/set_map.js"></script>



</body>

</html>

